<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
  <meta charset="UTF-8">
  <title>预交金</title>
  <link rel="stylesheet" href="../../lib/layui-v2.5.5/css/layui.css" media="all">
  <link rel="stylesheet" href="../../lib/font-awesome-4.7.0/css/font-awesome.min.css" media="all">
  <link rel="stylesheet" href="../../css/public.css" media="all">
  <style>
    #dataFrm{
      margin: -75px 0px 0px 500px;
    }
    .dataFrm_input{
      font-size: 16px;
      width: 150px;
      height: 20px;
      margin-right: 20px;
      margin-bottom: 8px;
    }
    .dataFrm_td{
      display: block;
      width: 80px;
      text-align: right;
    }
    #add{
      margin: 0px;
    }
    #addPay{
      width:200px;
      font-size: 16px;
      width: 200px;
      height: 30px;
      margin-right: 20px;
    }
    #show1,#show3,#ding{
      float: left;
    }
    .tu{
      position: absolute;
      margin: 7% 0px 0px 5%;
    }
    .tu1{
      position: absolute;
      margin: 15% 0px 0px 5%;
    }
  </style>
</head>
<body>
<!-- 搜索条件开始 -->
<fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;">
  <legend>查询条件</legend>
</fieldset>
<form class="layui-form" method="post" id="searchFrm">
  <div class="layui-form-item">
    <div class="layui-inline">
      <label class="layui-form-label">住院号:</label>
      <div class="layui-input-inline">
        <input type="number" id="shows" lay-verify="required|number" autocomplete="off" class="layui-input" style="width:200px" >
      </div>
    </div>
    <div class="layui-inline" style="position: absolute;left: 340px;top:66px;">
      <div class="layui-input-inline">
        <button type="button" class="layui-btn layui-btn-normal  layui-icon layui-icon-search" id="doSearch">查询</button>
      </div>
    </div>
  </div>
</form>
<!--显示患者信息开始-->
<form class="layui-form"  lay-filter="dataFrm" id="dataFrm">
  <input type="hidden" id="show" name="registerid">
  <input type="hidden" id="hidden" name="projectName" value="">
  <input type="hidden" id="hid" name="moneys" value=0>
  <table>
    <tr>
      <td class="dataFrm_td">姓名：</td>
      <td><input type="text" id="ceshi" class="dataFrm_input" name="userName" readonly></td>
      <td class="dataFrm_td">科室：</td>
      <td><input type="text" class="dataFrm_input" name="department" readonly></td>
      <td class="dataFrm_td">金额：</td>
      <td><input type="text" class="dataFrm_input" name="money" readonly></td>
    </tr>
    <tr>
      <td class="dataFrm_td">性别：</td>
      <td><input type="text" class="dataFrm_input" name="sex" readonly></td>
      <td class="dataFrm_td">医生：</td>
      <td><input type="text" class="dataFrm_input" name="doctorName" readonly></td>
      <td class="dataFrm_td">已用：</td>
      <td><input type="text" class="dataFrm_input" id="yong" readonly></td>
    </tr>
    <tr>
      <td class="dataFrm_td">年龄：</td>
      <td><input type="text" class="dataFrm_input" name="age" readonly></td>
      <td class="dataFrm_td">床位：</td>
      <td><input type="text" class="dataFrm_input" name="bedName" readonly></td>
      <td class="dataFrm_td">余款：</td>
      <td><input type="text" class="dataFrm_input" id="yu" readonly></td>
    </tr>
  </table>
</form>
<!--显示患者信息结束-->
<!-- 数据表格开始 -->
<div  style="display: none;" id="ToolBar">
  <input type="text" name="pay" id="addPay" autocomplete="off" lay-event="addPay" placeholder="请输入要查询的项目名称" class="pay" >
  <button type="button" class="layui-btn layui-btn-sm" lay-event="add" id="add">查询</button>
</div>
<div  style="display: none;" id="ToolBars"></div>
<!--项目行操作-->
<div  id="userBar" style="display: none;">
  <a class="layui-btn layui-btn-xs" lay-event="edit">选择</a>
</div>
<div  id="userBars" style="display: none;">
  <a class="layui-btn layui-btn-xs" lay-event="del">移除</a>
</div>
<!--项目显示-->
<div style="display: block;width: 43%;" id="ding">
  <table class="layui-hide" id="pay" lay-filter="pay"></table>
</div>
<!--图标显示-->
<div style="display: none;width:10%" id="show1">
  <i class="layui-icon tu" data-icon="&#xe65b;">&#xe65b;</i><br/>
  <i class="layui-icon tu1" data-icon="&#xe65a;">&#xe65a;</i>
</div>
<div style="display: none; width:44%;" id="show3">
  <table class="layui-hide" id="pays" lay-filter="pays"></table>
</div>
<!-- 数据表格结束 -->
<script src="../../lib/layui-v2.5.5/layui.js" charset="utf-8"></script>
<script src="../../lib/jquery-3.4.1/jquery-3.4.1.min.js" charset="utf-8"></script>
<script type="text/javascript">
  var tableIns;
  layui.use([ 'jquery', 'layer', 'form', 'table'  ], function() {
    var $ = layui.jquery;
    var layer = layui.layer;
    var form = layui.form;
    var table = layui.table;
    var laydate = layui.laydate;
    //渲染数据表格
    tableIns=table.render({
      elem: '#pay'   //渲染的目标对象
      ,url:'/web/liao/selItems' //数据接口
      ,title: '用户数据表'//数据导出来的标题
      ,toolbar:"#ToolBar"   //表格的工具条
      ,height:'full-200'
      ,page: 1  //是否启用分页, limits: [10, 20, 30]
      ,limits: [7, 20, 30]
      ,limit: 7//默认采用3
      ,cols: [[   //列表数据
        {field:'projectName', title:'项目名称',align:'center',width:'23%'}
        ,{field:'unitName', title:'计量单位',align:'center',width:'17%'}
        ,{field:'price', title:'售价',align:'center',width:'15%'}
        ,{field:'projectNames', title:'分类',align:'center',width:'29%'}
        ,{fixed: '', title:'操作', toolbar: '#userBar',align:'center',width:'15%'}
      ]]
    })
    //渲染数据表格
    tableInss=table.render({
      elem: '#pays'   //渲染的目标对象
      ,url:'' //数据接口
      ,title: '用户数据表'//数据导出来的标题
      ,height:'full-200'
      ,toolbar:"#ToolBars"
      ,page: 1  //是否启用分页, limits: [10, 20, 30]
      ,limits: [7, 20, 30]
      ,limit: 7//默认采用3
      ,cols: [[   //列表数据
        {field:'hospitalpriceid', title:'序号',align:'center',width:"15%"}
        ,{field:'durgname', title:'项目名称',align:'center',width:"20%"}
        ,{field:'repiceprice', title:'售价',align:'center',width:"15%"}
        ,{field:'htime', title:'时间',templet: "<div>{{layui.util.toDateString(d.htime, 'yyyy年MM月dd日 HH:mm:ss')}}</div>",align:'center',width:"35%"}
      ]]
    })
    //查询
    $("#doSearch").click(function(){
      if($("#shows").val()==""){
        layer.msg("请输入住院号！");
        $("#shows").select();
        return false;
      }
      sel();
    });
    //失焦事件
    $("#shows").blur(function(){
      $("#dataFrm")[0].reset();
      $("#show").val($(this).val());
      $("#hidden").val("");
      $("#show1").fadeOut(1);
      $("#show3").fadeOut(1);
    });
    function sel(){
      var params=$("#dataFrm").serialize();
      $.ajax({
        url: '/web/liao/selPay',
        dataType: 'json',
        type: 'post',
        data:params,
        success: function (data) {
          if(data==""){
            layer.msg("请输入正确的住院号！");
            $("shows").select();
          }else{
            $.each(data, function (index, item) {
              for(var i in item){
                $("input[name="+i+"]").val(item[i])
              }
            });
            sels();
            tableInss.reload({
              url:"/web/liao/selItem?"+params
            })
            $("#show1").fadeIn(1000);
            $("#show3").fadeIn(1000);
          }
        }
      })
    }
    table.on("toolbar(pay)",function(obj){
      if(obj.event=='addPay'){
        $("#hidden").val("");
        $(this).blur(function(){
          $("#hidden").val($(this).val());
        });
      }
      if(obj.event=='add') {
        var params=$("#dataFrm").serialize();
        $("#hidden").val("");
        tableIns.reload({
          url:"/web/liao/selItems?"+params
        })
      }
    })
    //监听项目行
    table.on('tool(pay)', function(obj){
      if($("#show").val()==""){
        layer.msg("请先查询患者信息！");
        return false;
      }
      if($("#ceshi").val()==""){
        layer.msg("请先查询患者信息！");
        return false;
      }
      var data = obj.data; //获得当前行数据
      if(obj.event === 'edit'){ //操作
        if($("#yu").val()<-5000){
          layer.msg("您的余额已欠费太多，请先去缴费");
        }else{
          var durgname=data.projectName;
          var repiceprice=data.price;
          var registerid=$("#show").val();
          layer.confirm('确认要添加该收费项目吗？', {
            btn : [ '确定', '取消' ]//按钮
          }, function(index) {
            layer.close(index);
            $.post("/web/liao/addItem",{durgname:durgname,repiceprice:repiceprice,registerid:registerid},function(inp){
              layer.msg(inp);
              //查询余额
              sels();
              //刷新数据 表格
              tableIns.reload();
              tableInss.reload();
            })
          });
        }
      }
    });
    //监听项目行
    table.on('tool(pays)', function(obj){
      var data = obj.data; //获得当前行数据
      if(obj.event=="del"){
        layer.confirm('确认要删除吗？', {
          btn : [ '确定', '取消' ]//按钮
        }, function(index) {
          layer.close(index);
          $.post("/web/liao/delItem",data,function(inp){
            layer.msg(inp);
            //查询余额
            sels();
            //刷新数据 表格
            tableIns.reload();
            tableInss.reload();
          })
        });
      }
    })
    function sels(){
      var params=$("#dataFrm").serialize();
      //查询余额
      $.post("/web/liao/selSurplus",params,function(inp) {
        if(inp==""){
          $("#yong").val(0);
        }else{
          $.each(inp, function (index, item) {
            for(var i in item){
              if(i=="repicetotal"){
                $("#yong").val(item[i]);
              }
            }
          });
        }
        $("#yu").val($("input[name='money']").val()-$("#yong").val());
      })
    }
  });
</script>
</body>
</html>